<template>
  <div class="common-title" :style="boxStyle">
    <div class="title-content">
      <span class="title-text" :style="titleStyle">{{ config.title }}</span>
      <div v-if="config.showTabs" class="tabs">
        <div 
          v-for="(tab, index) in config.tabItems" 
          :key="index"
          :class="['tab-item', { on: currentIndex === index }]"
          :style="getTabStyle(index)"
          @click="handleTabClick(index, tab)"
        >
          {{ tab.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonTitle',
  props: {
    config: {
      type: Object,
      required: true,
      default: () => ({
        title: '标题文本',
        color: '#ffffff',
        fontSize: '18px',
        width: '690px',
        height: '40px',
        backgroundImage: '',
        showTabs: false,
        selectedTab: 'tab1',
        tabItems: [],
        tabTextColor: '#ffffff',
        tabActiveTextColor: '#ffffff',
        tabFontSize: '14px'
      })
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  computed: {
    boxStyle() {
      return {
        width: this.config.width || '690px',
        height: this.config.height || '40px',
        backgroundImage: this.config.backgroundImage ? `url(${this.config.backgroundImage})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        zIndex: this.config.zIndex || 1
      }
    },
    titleStyle() {
      return {
        color: this.config.color,
        fontSize: this.config.fontSize
      }
    }
  },
  methods: {
    handleTabClick(index, tab) {
      this.currentIndex = index
      
      const newConfig = {
        ...this.config,
        selectedTab: tab.value
      }
      
      this.$emit('update:config', newConfig)
      this.$emit('tab-change', {
        index,
        value: tab.value,
        label: tab.label,
        identifier: 'title-tab-change',
        timestamp: Date.now()
      })

      console.log('Tab clicked:', {
        index,
        value: tab.value,
        label: tab.label,
        currentConfig: newConfig
      })
    },
    getTabStyle(index) {
      return {
        width: this.config.tabWidth || '80px',
        height: this.config.tabHeight || '40px',
        fontSize: this.config.tabFontSize || '14px',
        color: this.currentIndex === index ? this.config.tabActiveTextColor : this.config.tabTextColor,
        background: this.currentIndex === index 
          ? `url(${this.config.tabActiveBackgroundImage}) no-repeat center`
          : `url(${this.config.tabBackgroundImage}) no-repeat center`,
        backgroundSize: '100% 100%'
      }
    }
  }
}
</script>

<style scoped>
.common-title {
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  box-sizing: border-box;
}

.title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.title-text {
  font-weight: bold;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
</style> 